<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>骰子</title>
</head>
<body>
    <div style="display: flex">
        <div class="diceMain d1">
            <span class="dicePoin"></span>
        </div>
        <div class="diceMain d2">
            <span class="dicePoin"></span>
        </div>
        <div class="diceMain d3">
            <span class="dicePoin"></span>
        </div>
        <div class="diceMain d4">
            <span class="dicePoin"></span>
        </div>
        <div class="diceMain d5">
            <span class="dicePoin"></span>
        </div>
        <div class="diceMain d6">
            <span class="dicePoin"></span>
        </div>
        <div class="diceMain d7">
            <span class="dicePoin"></span>
        </div>
        <div class="diceMain d8">
            <span class="dicePoin"></span>
        </div>
        <div class="diceMain d9">
            <span class="dicePoin"></span>
        </div>
    </div>
    <hr>
    <div style="display: flex">
        <div class="diceMain d11">
            <span class="dicePoin"></span>
            <span class="dicePoin"></span>
        </div>
        <div class="diceMain d12">
            <span class="dicePoin"></span>
            <span class="dicePoin"></span>
        </div>
        <div class="diceMain d13">
            <span class="dicePoin"></span>
            <span class="dicePoin"></span>
        </div>
        <div class="diceMain d14">
            <span class="dicePoin"></span>
            <span class="dicePoin"></span>
        </div>
        <div class="diceMain d15">
            <span class="dicePoin"></span>
            <span class="dicePoin"></span>
        </div>
        <div class="diceMain d16">
            <span class="dicePoin"></span>
            <span class="dicePoin"></span>
        </div>
        <div class="diceMain d17">
            <span class="dicePoin"></span>
            <span class="dicePoin"></span>
        </div>
    </div>
    <hr>

</body>
<style>
div.diceMain{
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 5px;
    background-color: #ddd;
    border: solid 1px rgb(145, 141, 141);
    border-radius: 10%;
}
span.dicePoin{
    width: 20px;
    height: 20px;
    background-color: #222;
    border-radius: 50%;
}
.d1{
    display: flex;
}
.d2{
    display: flex;
    justify-content: center;
}
.d3{
    display: flex;
    flex-direction: row-reverse;
}
.d4{
    display: flex;
    align-items: center;
}
.d5{
    display: flex;
    justify-content: center;
    align-items: center;
}
.d6{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.d7{
    display: flex;
    align-items: flex-end;
}
.d8{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.d9{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.d11{
    display: flex;
    justify-content: space-between;
}
.d12{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.d13{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.d14{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.d15{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.d16{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.d17{
    display: flex;
}
.d17 .dicePoin:nth-child(2){
    align-self: center;
}
</style>
</html>